<template>
  <div class="lost-register">
    <header>
      <div class="title">失物登记</div>
      <div class="sub-title">登记您的失物信息，我们帮你找</div>
    </header>

    <section>
      <div class="item">
        <div class="title">物品名称</div>
        <input class="placeholder" placeholder="请填写" type="text">
      </div>
      <div class="item">
        <div class="title">物品特征（颜色、形状等）</div>
        <input class="placeholder" placeholder="请填写" type="text">
      </div>
      <div class="item">
        <div class="title">丢失日期</div>
        <div class="choose" @click="showDatePicker = true">
          <span :class="{black: showDate}">{{showDate? showDate: '请选择'}}</span>
          <i class="iconfont">&#xe651;</i>
        </div>
      </div>
      <div class="item">
        <div class="title">丢失时间</div>
        <div class="choose" @click="showTimePicker = true">
          <span :class="{black: showTime}">{{showTime? showTime: '请选择'}}</span>
          <i class="iconfont">&#xe651;</i>
        </div>
      </div>
      <div class="item">
        <div class="title">丢失地点（几路车上丢的）</div>
        <div class="choose">
          <input class="placeholder" v-model.trim="showLine" placeholder="请填写" type="number">
          <div class="text">路</div>
        </div>
      </div>
      <div class="item">
        <div class="title">失主姓名</div>
        <input class="placeholder" v-model.trim="userName" placeholder="请填写" type="text">
      </div>
      <div class="item">
        <div class="title">失主电话</div>
        <input class="placeholder" v-model.trim="userPhone" placeholder="请填写" maxlength="11" type="tel">
      </div>

      <div class="button" :class="{ 'no-click': !showDate || !showTime || !showLine || !userName || !userPhone }">
        <button v-if="!showDate || !showTime || !showLine || !userName || !userPhone">登记</button>
        <button v-else @click="register">登记</button>
      </div>

    </section>

    <!--    日期选择器-->
    <van-popup v-model="showDatePicker" position="bottom">
      <van-datetime-picker
        v-model="date"
        type="date"
        @confirm="dateConfirm"
        @cancel="cancel"
      />
    </van-popup>


    <!--    时间选择器-->
    <van-popup v-model="showTimePicker" position="bottom">
      <van-datetime-picker
        v-model="time"
        type="time"
        @confirm="timeConfirm"
        @cancel="cancel"
      />
    </van-popup>

  </div>

</template>
<!--失物登记-->
<script>
  export default {
    name: 'lostRegister',

    components: {
    },

    data () {
      return {
        userName: '',
        userPhone: '',
        // 日期选择器
        showDatePicker: false,
        date: new Date(),
        showDate: '',

        // 时间选择器
        showTimePicker: false,
        time: '12:00',
        showTime: '',
        showLine: ''
      }
    },

    watch: {
      userPhone (v) {
        if (v) {
          this.userPhone = v.replace(/[^\d]/g, '')
        }
      },
      showLine (v) {
        if (v && v.length > 10) {
          this.showLine = v.substr(0, 10)
        }
      }
    },

    methods: {
      // 登记按钮
      register () {
        this.$router.replace({name: 'lostRegisterResult'})
      },
      // 日期选择器逻辑
      dateConfirm (value) {
        this.date = value
        this.showDate = `${value.getFullYear()}年${value.getMonth() + 1}月${value.getDate()}日`
        this.showDatePicker = false
      },
      // 时间选择器逻辑
      timeConfirm (value) {
        this.time = value
        this.showTime = value
        this.showTimePicker = false
      },
      cancel () {
        this.showDatePicker = this.showTimePicker = false
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "~styles/extends.scss";

  .lost-register {
    header {
      color: $theme-white;
      text-align: center;
      background: url("../../assets/images/lost-find/lost-header.png") no-repeat;
      background-size: 100% 100%;
      padding: 28px;

      .title {
        font-size: 22px;
        font-family: PingFangSC-Medium;
        font-weight: bold;
        line-height: 30px;
        padding-bottom: 8px;
      }

      .sub-title {
        font-size: 14px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        line-height: 20px;
      }
    }

    section {
      padding: 0 16px 16px;

      .item {
        color: $theme-black;

        .title {
          font-size: 14px;
          font-family: PingFangSC-Medium;
          font-weight: bold;
          line-height: 20px;
          margin-top: 16px;
        }

        input {
          width: 100%;
          font-size: 20px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          line-height: 28px;
          padding: 16px 0 10px;
        }

        .choose {
          @extend %flex-justify-center-between;

          i {
            transform: rotate(90deg);
            font-size: 20px;
            line-height: normal;
          }


          span {
            @extend input;
            color: $theme-gray;
          }

          .black {
            color: $theme-black;
          }

          .text {
            @extend input;
            width: auto;
            line-height: normal;
            text-align: right;
          }
        }

        border-bottom: solid 1px $theme-border-color;
      }

      .button {
        margin-top: 36px;
      }

    }

  }

</style>
